import React from 'react'
import HomeCss from './index.module.scss'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import {HomeServer} from '../../api/index'
import ImgText from '../../components/ImgText'  //图文组件
import HomeBanner from '../../components/HomeBanner' //轮播图
import GoodsSmall from '../../components/GoodsSmall' //小商品
import GoodsMiddle from '../../components/GoodsMiddle' //中商品
import GoodsBag from '../../components/GoodsBag' //大商品
import Recommend from '../../components/Recommend' //评论
import Seckill from '../../components/Seckill' //倒计时


class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            headerNav: false, //头部内容显隐
            headerTop: true, //头部下载app
            skillRes: [], //秒杀内容
            pinbuyRes: [], //火拼内容
            navArr: [], //入口功能
            advRes: [], //四宫格
            bottomNavChange: true, //底部选项卡选中状态
            pageRes: [], //热卖商品
            postListRes: [], //种草推荐
            bannerList: [] //轮播图
        }
    }
    render() {
        return (
            <div id="top" className={HomeCss.main}>

                {/* 返回顶部 */}
                <div className={this.state.headerTop ? HomeCss.toTop : HomeCss.toTop + " " + HomeCss.toTopShow}>
                    <div>
                        <i className="iconfont icon-icon_phone"></i>
                        <p>App下载</p>
                    </div>
                    <span onClick={() => this.scrollToAnchor('top')}>
                        <i className="iconfont icon-icon_hd"></i>
                    </span>

                </div>
                {/* 头部 */}
                <div className={this.state.headerTop ? HomeCss.header : HomeCss.header + " " + HomeCss.headerHide}>
                    {/* 下载app */}
                    <div className={HomeCss.headerTop}>
                        <img src="https://images.vsigo.cn/userheadimg/100-100/20204503044367.png" alt="" />
                        <div>
                            <p>欢迎<span>使用APP下单</span></p>
                            <p>更优惠更方便!</p>
                        </div>
                        <div>
                            立即下载
                        </div>
                    </div>
                    {/* 搜索框 */}
                    <div className={HomeCss.headerBottom}>
                        <div>
                            <i className="iconfont icon-icon_ssx"></i>
                            <input type="search" placeholder="搜索/商品/品牌/类别" />
                        </div>
                        <img src="https://m.vsigo.cn/static/img/index_msg.png" alt="" />
                    </div>

                    {/* 选项卡滚动样式 */}
                    <ul className={this.state.headerNav ? HomeCss.headerNav : HomeCss.headerNavHide}>
                        <li onClick={this.botNavChange.bind(this, true)} className={this.state.bottomNavChange ? HomeCss.changeLi : ''}>
                            <p>热品单买</p>
                            <i></i>
                        </li>
                        <li onClick={this.botNavChange.bind(this, false)} className={this.state.bottomNavChange ? '' : HomeCss.changeLi}>
                            <p>种草推荐</p>
                            <i></i>
                        </li>
                    </ul>
                </div>
                {/* 主体内容 */}
                <div className={HomeCss.content}>
                    {/* 轮播图 */}
                    <div className={HomeCss.bannerBox}>
                        <div className={HomeCss.bannerTop}></div>
                        <div className={HomeCss.bannerBottom}>
                            <img src="/images/banhong.png" alt="" />
                        </div>
                        <div className={HomeCss.banner}>
                            <HomeBanner items={this.state.bannerList}></HomeBanner>
                        </div>
                    </div>
                    {/* 内容主体 */}
                    <div className={HomeCss.contentMain}>
                        {/* 入口 */}
                        <div className={HomeCss.entrance}>
                            {
                                this.state.navArr.length > 0 &&
                                this.state.navArr.map((item, index) => {
                                    return (
                                        <Link to={item.link} key={index}><ImgText {...item}></ImgText></Link>
                                    )
                                })
                            }

                        </div>
                        {/* 过度图 */}
                        <img className={HomeCss.excImg} src="https://images.vsigo.cn/ADVP/1460-278/202091110141912.jpg" alt="" />

                        {/* 秒杀/拼购 */}
                        <div className={HomeCss.together}>
                            {/* 秒杀 */}
                            <Link to="/">
                                <div className={HomeCss.togetherBox}>
                                    {/* 标题 */}
                                    <div className={HomeCss.togetherTitle}>
                                        <p className={HomeCss.togTitle}>限时秒杀</p>
                                        <Seckill></Seckill>
                                    </div>
                                    {/* 内容 */}
                                    <div className={HomeCss.seckillGoods}>
                                        {
                                            this.state.skillRes.length > 0 &&
                                            this.state.skillRes.map((item) => {
                                                return (
                                                    <div key={item.ItemID}><GoodsSmall {...item} ></GoodsSmall></div>
                                                )
                                            })
                                        }

                                    </div>
                                </div>
                            </Link>
                            {/* 拼购 */}
                            <Link to="/">
                                <div className={HomeCss.togetherBox}>
                                    {/* 标题 */}
                                    <div className={HomeCss.togetherTitle}>
                                        <p className={HomeCss.togTitle}>火拼购</p>
                                        <div className={HomeCss.togSta}>13件等你开团&gt;</div>
                                    </div>
                                    {/* 内容 */}
                                    <div className={HomeCss.togetherList}>
                                        {
                                            this.state.pinbuyRes.length > 0 &&
                                            this.state.pinbuyRes.map((item) => {
                                                return (
                                                    <div key={item.itemid}><GoodsMiddle {...item}></GoodsMiddle></div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            </Link>

                        </div>
                        {/* 首页田子格 */}
                        <div className={HomeCss.advRes}>
                            {
                                this.state.advRes.length > 0 &&
                                this.state.advRes.map((item, index) => {
                                    return (
                                        <Link to="/" key={index}><img src={item.pic_url} alt="" /></Link>
                                    )
                                })
                            }
                        </div>
                        {/* 底部选项卡 */}
                        <ul className={HomeCss.bottomNav}>
                            <li onClick={this.botNavChange.bind(this, true)} className={this.state.bottomNavChange ? HomeCss.bottomNavChange : ''}>
                                <h3>热卖单品</h3>
                                <p>欢迎选购</p>
                            </li>
                            <li onClick={this.botNavChange.bind(this, false)} className={this.state.bottomNavChange ? '' : HomeCss.bottomNavChange}>
                                <h3>种草推荐</h3>
                                <p>发现社区热议中</p>
                            </li>
                        </ul>

                        {/* 底部选项卡内容 */}
                        {
                            this.state.bottomNavChange ? (

                                // 热卖单品
                                <div hidden={!this.state.bottomNavChange} className={HomeCss.sellers}>
                                    {
                                        this.state.pageRes.map((item) => {
                                            return (
                                                item.arrValue.map((items) => {
                                                    return (
                                                        <Link to={'/deatil/'+items.ItemID} className={HomeCss.sellersList} key={items.ItemID}><GoodsBag {...items}></GoodsBag></Link>
                                                    )
                                                })
                                            )
                                        })
                                    }

                                </div>
                            ) : (
                                    // 种草推荐
                                    <div className={HomeCss.recommend}>
                                        <div>

                                        </div>
                                        <div className={HomeCss.recommends}>
                                            {
                                                this.state.postListRes.map((item, index) => {
                                                    return (
                                                        <Link to="/" className={HomeCss.recList} key={index}><Recommend {...item}></Recommend></Link>
                                                    )
                                                })
                                            }
                                        </div>


                                    </div>
                                )
                        }


                    </div>
                </div>

            </div>
        )
    }
    // 滚动条监听
    bindHandleScroll = () => {
        // console.log(e)
        // let clientHeight = document.documentElement.clientHeight; //可视区域高度
        let scrollTop = document.documentElement.scrollTop;  //滚动条滚动高度
        // let scrollHeight = document.documentElement.scrollHeight; //滚动内容高度

        // console.log(clientHeight, scrollTop, scrollHeight)
        if (scrollTop < 10) {
            this.setState({
                headerTop: true
            })
        } else if (scrollTop >= 100) {
            this.setState({
                headerTop: false
            })
        }
        if (scrollTop < 800) {
            this.setState({
                headerNav: false
            })
        } else if (scrollTop >= 800) {
            this.setState({
                headerNav: true
            })
        }
    }
    // 返回顶部
    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) { anchorElement.scrollIntoView(); }
        }
    }
    // 底部选项卡切换
    botNavChange = (e) => {
        this.setState({
            bottomNavChange: e
        })
    }
    componentDidMount = () => {
        // 添加滚动监听
        window.addEventListener('scroll', this.bindHandleScroll)

        let excHomeData = this.props.homeData || {}
        if (JSON.stringify(excHomeData) === "{}") {
            HomeServer.getHomeData("/data/homeData.json", 1).then((data) => {
                // console.log(data)

                let action = {
                    type: "HOME_DATA",
                    data: data || {}
                }
                // 调用dispatch
                this.props.dispatch(action)
                this.setState({
                    navArr: data.navArr || [],
                    advRes: data.advRes || [],
                    pageRes: data.pageRes || [],
                    postListRes: data.postListRes || [],
                    skillRes: data.skillRes || [],
                    pinbuyRes: data.pinbuyRes || [],
                    bannerList:data.bannerList || []
                })
            }).catch((error) => {
                console.log(error)
            })
        }else{
            this.setState({
                navArr: excHomeData.navArr || [],
                advRes: excHomeData.advRes || [],
                pageRes: excHomeData.pageRes || [],
                postListRes: excHomeData.postListRes || [],
                skillRes: excHomeData.skillRes || [],
                pinbuyRes: excHomeData.pinbuyRes || [],
                bannerList:excHomeData.bannerList || []
            })
        }

       
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
        // 卸载异步操作设置状态
        this.setState = (state, callback) => {
            return;
        }
    }
}
export default connect(state => {
    return { homeData: state.homeData }
})(Home);